<template>
  <el-dialog
    class="choice-dialog"
    title="选择应用范围"
    :visible="visible"
    append-to-body
    :close-on-click-modal="false"
    width="742px"
    @close="$emit('update:visible', false)"
  >
    <div class="flex flex-j-between choice-main">
      <div class="choice-left">
        <div>选择车辆</div>
        <div class="content-area">
          <div class="flex flex-hc mt10">
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText" 
              style="width: 95%;"
            />
          </div>

          <div class="pl10 mt10 treeBox">
            <el-tree
              node-key="id"
              show-checkbox
              class="filter-tree"
              :data="carList"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
              @check-change="getCurrentKey"
            />
          </div>
        </div>
      </div>
      <div class="choice-right">
        <div>已选车辆</div>
        <div class="content-area right-area">
          <!-- <el-row :gutter="30" class="flex" style="flex-shrink: 0;flex-wrap: wrap;">
            <el-col :span="8" v-for="(item, index) in 5" :key="index">
              
            </el-col>
          </el-row> -->
          <div class="flex row-wrap">
            <div class="choice-car-box" v-for="item in checkKeysList" :key="item.id">
              <div class="choice-car flex flex-hc">
                <div class="mr5">
                  {{ item.label }}
                </div>
                <div style="cursor: pointer;" @click="handleDelCar(item.id)">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <div class="flex flex-hc">
        <el-button type="primary" @click="onSave" size="medium" style="width: 200px;">保 存</el-button>
      </div>
    </span>
  </el-dialog>
</template>

<script>
  import { carList } from './rule'

  export default {
    props: {
      configId: {
        type: [Number,String],
        default: ''
      },
      selectKeys: {
        type: Array,
        default: () => []
      },
      visible: {
        type: Boolean,
        default: false,
      },
      carListData: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      visible(val) {
        if (val) {
          this.$nextTick(() => {
            this.getCarList()

            if (this.selectKeys.length > 0 && this.carListData.length > 0) {
              this.checkKeysList = this.carListData.filter(item => this.selectKeys.includes(item.id))
            }
          })
        }
      }
    },
    data() {
      return {
        checkKeysList: [],
        carList: [],
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleDelCar(id) {
        this.$refs.tree.setChecked(id, false, true)
      }, 
      getCurrentKey() {
        console.log(this.$refs.tree.getCheckedNodes())
        const checkKeys = this.$refs.tree.getCheckedNodes().map((item => {
          if (item.plateNo) {
            return {
              id: item.id,
              label : item.label
            }
          }
        })).filter(Boolean)

        this.checkKeysList = checkKeys
        console.log('checkKeys',checkKeys)
      },
      formatterCarList(data) {
        data.forEach(item => {
          if (item.companyName) {
            item.label = item.companyName
            item.id = item.companyId
            item.children = JSON.parse(JSON.stringify(item.fleets))
          }

          if (item.fleetName) {
            item.label = item.fleetName
            item.id = item.fleetId
            item.children = JSON.parse(JSON.stringify(item.vehicles))
          }

          if (item.plateNo) {
            item.id = item.vehicleId
            item.label = item.plateNo
          }

          if (item.children){
            this.formatterCarList(item.children)
          }
        });

        return data
      },
      getCarList() {
        this.carList = this.formatterCarList(carList)

        if (this.selectKeys) {
          this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys(this.selectKeys)
          })
        }
      },
      onSave() {
        this.$emit('onSaveCarList',this.checkKeysList),
        this.$emit('update:visible', false)
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },
  };
</script>

<style lang="scss" scoped>
  .choice-dialog {
    ::v-deep.el-dialog__header {
      border-bottom: 1px solid #d7d7d7;
    }

    ::v-deep.el-dialog {
      margin-top: 3vh !important;
    }

    .choice-main {
      height: 70vh;
    }

    .choice-left,
    .choice-right {
      width: 49%;
    }

    .content-area {
      margin-top: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      height: 100%;
    }

    .treeBox {
      height: 89%;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .right-area {
      padding-top: 10px;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .choice-car-box {
      width: 33%;
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
    }

    .choice-car {
      width: 95px;
      height: 34px;
      background-color: rgba(0, 141, 202, 0.294117647058824);
      color: #02a7f0;
      line-height: 34px;
      text-align: center;
      font-size: 12px;
      border-radius: 5px;
    }
  }
</style>
